<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- default(white), black, black-translucent -->
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Foxit PDF SDK for Web">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=no,transition=no">
    <meta name="format-detaction" content="telephone=no,email=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="750">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="renderer" content="webkit">

    <title>Foxit PDF SDK for Web</title>
    <link rel="shortcut icon" href="../../assets/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./lib/UIExtension.css">
    <style>
        body {
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);
        }

        #pdf-ui {
            top: 20px;
            bottom: 0;
            position: absolute;
            width: 100vw;
        }

        .fv__ui-toolbar .fv__ui-tab-nav {
            margin-left: 266px;
        }

        .fv__ui-toolbar .fv__ui-tab-nav li {
            color: white;
        }

        .fv__ui-toolbar .fv__ui-tab-nav li.active {
            color: #636363;
        }
        
        .fv__ui-toolbar .fv__ui-gtab-item {
            color: #fff;
        }
        .fv__ui-toolbar .fv__ui-gtab-item.active {
            color: #636363;
            background-color: #fff;
        }

        .fv__ui-mobile #pdf-ui {
            top: 0;
        }

        .fv__ui-mobile .fv__ui-nav {
            display: none;
        }
		
		/* .fv__ui-nav{
			
			background-color:#002A80
		} */
    </style>
    <script src="./lib/adaptive.js"></script>
</head>

<body>
    <div class="fv__ui-nav">
        <a class="fv__ui-nav-logo" href="javascript:location.reload()">
            <i class="fv__icon-logo"></i>
        </a>
    </div>
    <div id="pdf-ui"></div>
    <script src="./lib/license-key.js"></script>
    <script src="./lib/preload-jr-worker.js"></script>
    <script>
        var readyWorker = preloadJrWorker({
            workerPath: './lib/',
            enginePath: './lib/jr-engine/gsdk',
            fontPath: '../external/brotli',
            licenseSN: licenseSN,
            licenseKey: licenseKey
        })
    </script>
    <script src="./lib/UIExtension.full.js"></script>
    <script>
        var PDFUI = UIExtension.PDFUI;
        var Events = UIExtension.PDFViewCtrl.Events;
        var pdfui = new PDFUI({
            viewerOptions: {
                libPath: './lib',
                jr: {
                    readyWorker: readyWorker
                }
                // customs: {
                //     getDocPermissions: function () {
                //         return 0;
                //     }
                // }
            },
            renderTo: '#pdf-ui',
            appearance: UIExtension.appearances.adaptive,
            fragments: [],
            addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
            './lib/uix-addons/allInOne.mobile.js':
            './lib/uix-addons/allInOne.js'
        });

        pdfui.addUIEventListener('fullscreenchange', function (isFullscreen) {
            if (isFullscreen) {
                document.body.classList.add('fv__pdfui-fullscreen-mode');
            } else {
                document.body.classList.remove('fv__pdfui-fullscreen-mode');
            }
        });

        function openLoadingLayer() {
            // return pdfui.getRootComponent()
            // .then(function(root) {
            //     return root.getComponentByName('pdf-viewer')
            // }) .then(function(viewerComponent) {
            //     return pdfui.loading(viewerComponent.element);
            // });
            return pdfui.loading();
        }
        var loadingComponentPromise = openLoadingLayer();
        var openFileError = null
        var passwordErrorCode = PDFViewCtrl.PDF.constant.Error_Code.password
        function startLoading() {
            if(openFileError&&openFileError.error===passwordErrorCode)return
            if (loadingComponentPromise) {
                loadingComponentPromise = loadingComponentPromise
                    .then(function (component) {
                        component.close();
                    })
                    .then(openLoadingLayer);
            } else {
                loadingComponentPromise = openLoadingLayer();
            }
        }
        pdfui.addViewerEventListener(Events.beforeOpenFile, startLoading);
        pdfui.addViewerEventListener(Events.openFileSuccess, function () {
            openFileError = null
            loadingComponentPromise.then(function (component) {
                component.close();
            });
        });
        pdfui.addViewerEventListener(Events.openFileFailed, function (data) {
            openFileError = data
            if(openFileError&&openFileError.error===passwordErrorCode)return
            loadingComponentPromise.then(function (component) {
                component.close();
            });
        });

        pdfui.addViewerEventListener(Events.startConvert, startLoading);
        pdfui.addViewerEventListener(Events.finishConvert, function () {
            loadingComponentPromise.then(function (component) {
                component.close();
            });
        });

        pdfui.openPDFByHttpRangeRequest({
            range: {
                url: '../../../docs/FoxitPDFSDKforWeb_DemoGuide.pdf',
            }
        }, { fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf' })

        window.addEventListener(UIExtension.PDFViewCtrl.DeviceInfo.isDesktop ? 'resize' : 'orientationchange', function(e) {
            pdfui.redraw().catch(function(err) {console.log(err)});
        });

        //signature handlers
        var requestData = function(type, url, responseType, body){
            return new Promise(function(res, rej){
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open(type, url);

                xmlHttp.responseType = responseType || 'arraybuffer';
                var formData = new FormData();
                if (body) {
                    for (var key in body) {
                        if (body[key] instanceof Blob) {
                            formData.append(key, body[key], key);
                        } else {
                            formData.append(key, body[key]);
                        }
                    }
                }
                xmlHttp.onloadend = function(e) {
                    var status = xmlHttp.status;
                    if ((status >= 200 && status < 300) || status === 304) {
                        res(xmlHttp.response);
                    }else{
                        rej(new Error('Sign server is not available.'));
                    }
                };
                
                xmlHttp.send(body ? formData : null);
            });
        };

        pdfui.setVerifyHandler(function (signatureField, plainBuffer, signedData){
            return requestData('post', location.origin+'/signature/verify', 'text', {
                filter: signatureField.getFilter(),
                subfilter: signatureField.getSubfilter(),
                signer: signatureField.getSigner(),
                plainContent: new Blob([plainBuffer]),
                signedData: new Blob([signedData])
            });
        });
        pdfui.registerSignHandler({
            filter: 'Adobe.PPKLite',
            subfilter: 'adbe.pkcs7.sha1',
            flag: 0x100,
            distinguishName: 'e=support@foxitsoftware.cn',
            location: 'FZ',
            reason: 'Test',
            signer: 'web sdk',
            showTime: true,
            sign: function(setting, buffer) {
                return requestData('post', location.origin+'/signature/digest_and_sign', 'arraybuffer', {
                    plain: new Blob([buffer])
                })
            }
        });
    </script>
    
</body>

</html>